import { VuexModule, Module, Mutation, Action, getModule } from "vuex-module-decorators";
import { getSidebarStatus, getSize, setSidebarStatus, setLanguage, setSize } from "@/utils/cookies";
import i18n, { getLocale } from "@/lang";
import store from "@/store";
import { Token } from '@/utils/auth';
import { AuthModule } from './auth';
import PandaApi from "@/api/pandaApi";

export enum DeviceType {
  Mobile,
  Desktop,
}

export interface IAppState {
  device: DeviceType;
  sidebar: {
    opened: boolean;
    withoutAnimation: boolean;
  };
  language: string;
  size: string;
  workerOrderCount: number;
  uuid: string;
  baseURL: string;
  searchDesktopsValue: string;
  tablePageSize: number;
};

@Module({ dynamic: true, store, name: "app" })
class App extends VuexModule implements IAppState {
  public sidebar = {
    opened: getSidebarStatus() !== "closed",
    withoutAnimation: false
  }

  public device = DeviceType.Desktop
  public language = getLocale()
  public size = getSize() || "small"
  public workerOrderCount = 0
  public uuid = ''
  public baseURL = ''
  public searchDesktopsValue = ''
  public tablePageSize = 10

  @Mutation
  private TOGGLE_SIDEBAR(withoutAnimation: boolean) {
    this.sidebar.opened = !this.sidebar.opened;
    this.sidebar.withoutAnimation = withoutAnimation;
    if (this.sidebar.opened) {
      setSidebarStatus("opened");
    } else {
      setSidebarStatus("closed");
    }
  }

  @Mutation
  private CLOSE_SIDEBAR(withoutAnimation: boolean) {
    this.sidebar.opened = false;
    this.sidebar.withoutAnimation = withoutAnimation;
    setSidebarStatus("closed");
  }

  @Mutation
  private TOGGLE_DEVICE(device: DeviceType) {
    this.device = device;
  }

  @Mutation
  private SET_SEARCHVALUE(value: string) {
    this.searchDesktopsValue = value;
  }

  @Mutation
  private SET_LANGUAGE(language: string) {
    this.language = language;
    setLanguage(this.language);
    i18n.locale = language;
    // setTimeout(() => {
    //   location.reload();
    // });
  }

  @Mutation
  private SET_UUID(id: string) {
    this.uuid = id;
  }

  @Mutation
  private SET_BASEURL(baseURL: string) {
    this.baseURL = baseURL;
  }

  @Mutation
  private SET_SIZE(size: string) {
    this.size = size;
    setSize(this.size);
  }

  @Mutation
  private SET_WORKER_ORDER_NUMBER(count: number) {
    this.workerOrderCount = count;
  }

  @Mutation
  private SET_TABLEPAGESIZE(value: number) {
    this.tablePageSize = value;
  }

  @Action
  public ToggleSideBar(withoutAnimation: boolean) {
    this.TOGGLE_SIDEBAR(withoutAnimation);
  }

  @Action
  public CloseSideBar(withoutAnimation: boolean) {
    this.CLOSE_SIDEBAR(withoutAnimation);
  }

  @Action
  public ToggleDevice(device: DeviceType) {
    this.TOGGLE_DEVICE(device);
  }

  @Action
  public SetLanguage(language: string) {
    this.SET_LANGUAGE(language);
  }

  @Action
  public SetSize(size: string) {
    this.SET_SIZE(size);
  }

  @Action
  public SetUUID(uuid: string) {
    this.SET_UUID(uuid);
  }

  @Action
  public SetBaseURL(baseURL: string) {
    this.SET_BASEURL(baseURL);
  }

  @Action
  public ClearBaseURL() {
    this.baseURL = '';
  }

  @Action
  public SetSearchDesktopsValue(value: any) {
    this.SET_SEARCHVALUE(value);
  }

  @Action SetTablePageSize(value: number) {
    this.SET_TABLEPAGESIZE(value);
  }

  @Action
  public ClearSearchDesktopsValue() {
    this.searchDesktopsValue = '';
  }

  @Action
  public async SetWorkOrderNumber() {
    if (!AuthModule.token) return;
    try {
      const params = { page: 1, page_size: 10, result_code: 'open' };
      const response: any = await new PandaApi().apiGetWorkorders(params);
      const count = response.total;
      this.SET_WORKER_ORDER_NUMBER(count);
    } catch (error) {
      this.SET_WORKER_ORDER_NUMBER(0);
      // console.log(error);
    }
  }
}

export const AppModule = getModule(App);
